<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layouts::header"></head>
<head>
    <title>
        模板
    </title>
    <meta charset="utf-8">
    <meta content="" name="description">
    <meta content="" name="keywords">
    <link rel='stylesheet' id='custom-style-css' href='../css/myblog.css'
          type='text/css' media='all'>
    <script type='text/javascript' src='../js/jquery.js'>
    </script>
    <script type='text/javascript' src='../js/jquery-migrate.min.js'>
    </script>
    <script type='text/javascript' src='../js/bootstrap.js'>
    </script>
    <script type='text/javascript' src='../js/jquery.icheck.min.js'>
    </script>
    <script type='text/javascript' src='../js/jquery.validate.js'>
    </script>
    <script type='text/javascript' src='../js/jquery.lazyload.min.js'>
    </script>
    <script type='text/javascript' src='../js/myblog.js'>
    </script>
    <style>
        div{filter:alpha(Opacity=80);-moz-opacity:0.9;opacity: 0.9;}
    </style>
</head>


<body ondragstart="return false" class="home blog">

<div class="container">
    <nav th:replace="layouts::navbar"></nav>
    <div class="container">
        <a th:href="@{/tasks/new}" class="btn btn-primary btn-sm mb-3">新增任务</a>
    </div>
    <div id="ct" class="ct2_a wp cl" style="background-color: rgba(255, 255, 255, 0.7);">
        <div class="mn">
            <div class="bm bw0">
                <h1 class="mt">
                    <img src="https://bbs.zdfx.net/static/image/feed/task.gif" alt="任务" class="vm">
                    新任务</h1>
                <div class="ptm">


                    <table cellspacing="0" cellpadding="0" width="100%" id="tablestage1" style="display: none">

                        <tr th:each="aTask : ${taskUserAccounts}">
                            <td width="80" class="bbda"><img src="../picture/task.gif" width="64" height="64" alt="任务名字"></td>
                            <td class="bbda ptm pbm">
                                <h3 class="xs2 xi2"><a href="javascript:" th:text="${aTask.task_name}"></a> <span class="xs1 xg2 xw0">(人气: <a th:text="${aTask.userAccountCount}">参与人数</a> )</span></h3>
                                <p class="xg2" th:text="${aTask.task_description}"></p>
                            </td>
                            <td class="xi1 bbda hm" width="200" th:text="${aTask.task_stage}"></td>
                            <td width="120" class="bbda">
                                <a href="javascript:" onclick="doane(event);showDialog('您所在的用户组无法申请此任务')"><img src="../picture/disallow.gif" title="您所在的用户组无法申请此任务" alt="disallow"></a>
                            </td>
                        </tr>

                    </table  >

                    <table cellspacing="0" cellpadding="0" width="100%" id="tablestage2" style="display: none">

                        <tr th:each="aTask : ${taskUserAccounts}" th:if="${aTask.task_stage=='待领取的任务'}">
                            <td width="80" class="bbda"><img src="../picture/task.gif" width="64" height="64" alt="任务名字"></td>
                            <td class="bbda ptm pbm">
                                <h3 class="xs2 xi2"><a href="javascript:" th:text="${aTask.task_name}"></a> <span class="xs1 xg2 xw0">(人气: <a th:text="${aTask.userAccountCount}">参与人数</a> )</span></h3>
                                <p class="xg2" th:text="${aTask.task_description}"></p>
                            </td>
                            <td class="xi1 bbda hm" width="200" th:text="${aTask.task_stage}"></td>
                            <td width="120" class="bbda">
                                <a href="javascript:" onclick="doane(event);showDialog('您所在的用户组无法申请此任务')"><img src="../picture/disallow.gif" title="您所在的用户组无法申请此任务" alt="disallow"></a>
                            </td>
                        </tr>

                    </table>

                    <table cellspacing="0" cellpadding="0" width="100%" id="tablestage3" style="display: none">

                        <tr th:each="aTask : ${taskUserAccounts}" th:if="${aTask.task_stage=='已领取的任务'}">
                            <td width="80" class="bbda"><img src="../picture/task.gif" width="64" height="64" alt="任务名字"></td>
                            <td class="bbda ptm pbm">
                                <h3 class="xs2 xi2"><a href="javascript:" th:text="${aTask.task_name}"></a> <span class="xs1 xg2 xw0">(人气: <a th:text="${aTask.userAccountCount}">参与人数</a> )</span></h3>
                                <p class="xg2" th:text="${aTask.task_description}"></p>
                            </td>
                            <td class="xi1 bbda hm" width="200" th:text="${aTask.task_stage}"></td>
                            <td width="120" class="bbda">
                                <a href="javascript:" onclick="doane(event);showDialog('您所在的用户组无法申请此任务')"><img src="../picture/disallow.gif" title="您所在的用户组无法申请此任务" alt="disallow"></a>
                            </td>
                        </tr>

                    </table>

                    <table cellspacing="0" cellpadding="0" width="100%" id="tablestage4" style="display: none">

                        <tr th:each="aTask : ${taskUserAccounts}" th:if="${aTask.task_stage=='已完成的成功任务'}">
                            <td width="80" class="bbda"><img src="../picture/task.gif" width="64" height="64" alt="任务名字"></td>
                            <td class="bbda ptm pbm">
                                <h3 class="xs2 xi2"><a href="javascript:" th:text="${aTask.task_name}"></a> <span class="xs1 xg2 xw0">(人气: <a th:text="${aTask.userAccountCount}">参与人数</a> )</span></h3>
                                <p class="xg2" th:text="${aTask.task_description}"></p>
                            </td>
                            <td class="xi1 bbda hm" width="200" th:text="${aTask.task_stage}"></td>
                            <td width="120" class="bbda">
                                <a href="javascript:" onclick="doane(event);showDialog('您所在的用户组无法申请此任务')"><img src="../picture/disallow.gif" title="您所在的用户组无法申请此任务" alt="disallow"></a>
                            </td>
                        </tr>

                    </table>

                    <table cellspacing="0" cellpadding="0" width="100%" id="tablestage5" style="display: none">

                        <tr th:each="aTask : ${taskUserAccounts}" th:if="${aTask.task_stage=='失败的任务'}">
                            <td width="80" class="bbda"><img src="../picture/task.gif" width="64" height="64" alt="任务名字"></td>
                            <td class="bbda ptm pbm">
                                <h3 class="xs2 xi2"><a href="javascript:" th:text="${aTask.task_name}"></a> <span class="xs1 xg2 xw0">(人气: <a th:text="${aTask.userAccountCount}">参与人数</a> )</span></h3>
                                <p class="xg2" th:text="${aTask.task_description}"></p>
                            </td>
                            <td class="xi1 bbda hm" width="200" th:text="${aTask.task_stage}"></td>
                            <td width="120" class="bbda">
                                <a href="javascript:" onclick="doane(event);showDialog('您所在的用户组无法申请此任务')"><img src="../picture/disallow.gif" title="您所在的用户组无法申请此任务" alt="disallow"></a>
                            </td>
                        </tr>

                    </table>

                    <script>
                        function table1(){
                            var tablestage1 = document.getElementById("tablestage1");
                            cleartable();
                            tablestage1.style.display="";
                        }
                        function table2(){
                            var tablestage2 = document.getElementById("tablestage2");
                            cleartable();
                            tablestage2.style.display="";
                        }
                        function table3(){
                            var tablestage3 = document.getElementById("tablestage3");
                            cleartable();
                            tablestage3.style.display="";
                        }
                        function table4(){
                            var tablestage4 = document.getElementById("tablestage4");
                            cleartable();
                            tablestage4.style.display="";
                        }
                        function table5(){
                            var tablestage5 = document.getElementById("tablestage5");
                            cleartable();
                            tablestage5.style.display="";
                        }
                        function cleartable(){
                            var tablestage1 = document.getElementById("tablestage1");
                            var tablestage2 = document.getElementById("tablestage2");
                            var tablestage3 = document.getElementById("tablestage3");
                            var tablestage4 = document.getElementById("tablestage4");
                            var tablestage5 = document.getElementById("tablestage5");
                            tablestage1.style.display="none";
                            tablestage2.style.display="none";
                            tablestage3.style.display="none";
                            tablestage4.style.display="none";
                            tablestage5.style.display="none";
                        }
                    </script>

                </div>
            </div>
        </div>
        <div class="appl">
            <div class="tbn">
                <h3 class="mt bbda">任务 👇</h3>
                <ul>
                    <li class="active"><a href="#alltask" data-toggle="tab" onclick="table1()">全部任务</a></li>
                    <li><a href="#newtask" data-toggle="tab" onclick="table2()">新任务</a></li>
                    <li><a href="#tasking" data-toggle="tab" onclick="table3()">进行中的任务</a></li>
                    <li><a href="#taskdone" data-toggle="tab" onclick="table4()">已完成的任务</a></li>
                    <li><a href="#failtask" data-toggle="tab" onclick="table5()">失败的任务</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<script src="js/bootstrap.min.js"></script>

<section class="hidden-xs">
    <ul class="cb-slideshow">
        <li>
                    <span style="background-image:url(../image/img.jpg)">
                    </span>
        </li>
        <li>
                    <span style="background-image:url(../image/img1.jpg)">
                    </span>
        </li>
        <li>
                    <span style="background-image:url(../image/img2.jpg)">
                    </span>
        </li>
        <li>
                    <span style="background-image:url(../image/img3.jpg)">
                    </span>
        </li>
        <li>
                    <span style="background-image:url(../image/img4.jpg)">
                    </span>
        </li>
        <li>
                    <span style="background-image:url(../image/img5.jpg)">
                    </span>
        </li>
    </ul>
</section>
<div class="GalMenu GalDropDown">
    <div class="circle" id="gal">
        <div class="ring">
            <a href="" title="" class="menuItem" style="left: 50%; top: 15%;">
                首页
            </a>
            <a href="" title="" class="menuItem" style="left: 80.3109%; top: 32.5%;">
                首页
            </a>
            <a href="" title="" class="menuItem" style="left: 80.3109%; top: 67.5%;">
                首页
            </a>
            <a href="" title="" class="menuItem" style="left: 50%; top: 85%;">
                首页
            </a>
            <a href="" title="" class="menuItem" style="left: 19.6891%; top: 67.5%;">
                首页
            </a>
            <a href="" title="" class="menuItem" style="left: 19.6891%; top: 32.5%;">
                首页
            </a>
        </div>
        <audio id="audio" src="https://ercygame.com/wp-content/themes/mygalgame/ui/audio/onj.mp3">
        </audio>
    </div>
</div>
<div id="overlay" class="magnify">
    <div class="large" style="background-image:url(../image/img6.jpg)">
    </div>
    <img class="small" src="../picture/rpic.png" width="1920">
    <footer id="zan-footer">
        <div class="container">
            <div class="row">
                        <span>
                            <span>
                                <script src="../js/myblog_bd.js">
                                </script>
                                <script src="../js/myblog_min.js">
                                </script>
                            </span>
                        </span>
            </div>
            <!--统计代码-->
            <!--统计代码结束-->
        </div>
    </footer>
    <div id="zan-gotop">
        <i class="fa fa-angle-up">
        </i>
    </div>



</div>
</body>

</html>